<template>
    <Transition>
        <div v-if="YShare.show" class="y-share d-flex align-center justify-center">
            <div class="box d-flex flex-column">
                <div class="had flex-0-1 d-flex justify-space-between">
                    <span class="c-title-2 c-bold">{{ YShare.title }}</span>
                    <VIcon @click="YShare.colose()">mdi mdi-close</VIcon>
                </div>
                <div class="bdy flex-1-1">
                    <div class="share_had d-flex">
                        <span class="c-title-2 c-bold">{{ YShare.imgTitle }}</span>
                    </div>
                    <img class="share_img" :src="YShare.blob.toDataURL()" alt="" />
                </div>
                <div class="ftr d-flex">
                    <div class="lft d-flex align-center flex-1-1">
                        <a @click="YShare.copyLink(recommendCode)" class="d-flex flex-column justify-center align-center">
                            <Link>
                            </Link>
                            <span class="c-title-5 mt-2">copy link</span>
                        </a>
                        <a download :href="YShare.blob.toDataURL()" class="d-flex flex-column justify-center align-center">
                            <Download></Download>
                            <span class="c-title-5 mt-2">download</span>
                        </a>
                    </div>
                    <div class="rgt d-flex align-center flex-1-1">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-space-between">
                                <ShareNetwork class="d-inline-flex" v-for="item in YshareIcon" :title="item.title"
                                    @open="reload" :description="item.description" :network="item.network"
                                    :hashtags="item.hashtags" :link="item.url" :url="item.url">
                                    <component :is="item.icon"></component>
                                </ShareNetwork>
                            </div>
                            <span class="c-title-5 mt-2 text-center">Share with Your Community</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Transition>
</template>
<script setup lang="ts">
import img from "@/assets/share_bg.png";
import Link from "@/components/j-svg/link.vue";
import Download from "@/components/j-svg/download.vue";
import { YShare } from "./script/index";
import { Yshare as YshareIcon } from "@/comm/ShareConfig"
import { onMounted, computed, watch } from "vue";
import { reload } from "@/comm/tools";
import i18n from "@/locals";
import { useUser } from "@/stores/user";
const user = useUser();
onMounted(() => {
    let title = i18n.global.t("message.Global.shares.ts");
    YshareIcon.forEach(icon => {
        icon.setTitle(title);
    });
});
watch(() => user.info, () => {
    let url = location.origin;
    if (user.info?.recommendCode) {
        url = url + "/recommend/" + user.info?.recommendCode;
        YshareIcon.forEach(icon => {
            icon.setUrl(url);
        });
    }
    // console.log('监听到了user.info的变化!!!!', YshareIcon)
});
const recommendCode = computed(() => {
    return user.info?.recommendCode;
});
</script>
<style scoped lang="less">
@import url("./style.less");
</style>
